// $(function(){
// 	orientationHandler();

// 	window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", orientationHandler, false);

// 	function orientationHandler() {
// 		if (window.orientation == 90 || window.orientation == -90) {
// 			hkjcModal.create('请将手机转为竖屏模式以继续游戏', '確定');
// 			return false;
// 		};
// 		if (window.orientation == 0 || window.orientation == 180) {
// 			$('.hkjc-modal').hide();
// 		};
// 	}

// });

var durationPage = 600,
	durationMask = 1000,
	durationWord = 900,
	durationImg = 750;
var yStart,
	xStart,
	mousedown = false;

var animationFuncs = {
	page_index: function() {
		var canvas = document.getElementById("canvas"),
			context = canvas.getContext("2d");
		var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
		var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame || window.msCancelAnimationFrame || window.webkitCancelRequestAnimationFrame || window.mozCancelRequestAnimationFrame || window.msCancelRequestAnimationFrame;
		var startTime = new Date(),
			lastTime = startTime;
		var animationTime = 3000,
			lengthTotal = 568,
			velocity = lengthTotal / animationTime * 1.25;
		var now;
		var time,
			step;
		var animation;
		var lastPoint = {
			x: 360,
			y: 820
		};
		var realWidth = 720,
			realHeight = 1134;
		var years = [
			{
				x: 303,
				y: 839,
				w: 126,
				h: 36,
				o: 0,
				img: 'static/img/year_1995.png'
			},
			{
				x: 149,
				y: 741,
				w: 134,
				h: 42,
				o: 0,
				img: 'static/img/year_2000.png'
			},
			{
				x: 450,
				y: 650,
				w: 162,
				h: 48,
				o: 0,
				img: 'static/img/year_2005.png'
			},
			{
				x: 101,
				y: 540,
				w: 197,
				h: 57,
				o: 0,
				img: 'static/img/year_2010.png'
			},
			{
				x: 224,
				y: 388,
				w: 277,
				h: 83,
				o: 0,
				img: 'static/img/year_2015.png'
			},
		];
		var dots = [
			{
				x: 360,
				y: 820,
				o: 0
			},
			{
				x: 360,
				y: 492,
				o: 0
			}
		]
		canvas.width = document.body.clientWidth;
		canvas.height = document.body.clientHeight;
		

		context.scale(canvas.width/realWidth, canvas.height/realHeight);
		context.drawImage(resources.get("static/img/bg_index.jpg"), 0, 0, realWidth, realHeight);
		function animate(time) {
			draw();
			animation = requestAnimationFrame(animate);
		}
		function draw() {
			now = new Date();
			time = now - lastTime;
			step = (now - startTime) / animationTime;
			// context.beginPath();
			// context.rect(100, 530, 512, 1024);
			// context.clip();
			// var lineSave = context.getImageData(305, 638, 132, 326);
			// console.log(lineSave);
			// drawBg();
			drawYears();
			drawLine();
			drawDots();
			// context.putImageData(lineSave, 305, 638);
			lastTime = now;
			if (step >= 1) {
				animationStop();
			};
		}
		function drawBg() {
			context.clearRect(0, 0, realWidth, realHeight);
			context.drawImage(resources.get("static/img/bg_index.jpg"), 0, 0, realWidth, realHeight);
		}
		function drawLine() {
			var loc = updateLine();
			context.strokeStyle = '#c51845';
			context.lineWidth = 2;
			context.beginPath();
			context.moveTo(lastPoint.x, lastPoint.y);
			context.lineTo(loc.x, loc.y);
			context.stroke();
			lastPoint.x = loc.x;
			lastPoint.y = loc.y;
		}
		function updateLine() {
			var rotate = 0;
			var loc = {
				x: lastPoint.x,
				y: lastPoint.y
			};
			if (step < 0.1) {
				return loc;
			} else if (step < 0.142) {
				rotate = 90;
			} else if (step < 0.220) {
				rotate = 156;
			} else if (step < 0.298) {
				rotate = 24;
			} else if (step < 0.356) {
				rotate = 90;
			} else if (step < 0.476) {
				rotate = 17;
			} else if (step < 0.596) {
				rotate = 163;
			} else if (step < 0.652) {
				rotate = 90;
			} else if (step < 0.730) {
				rotate = 145;
			} else if (step < 0.808) {
				rotate = 35;
			} else if (step < 0.9) {
				rotate = 90;
			} else if (step < 1){
				dots[1].x = lastPoint.x;
				dots[1].y = lastPoint.y;
				return loc;
				// animationStop();
			} else {
				animationStop();
				return false;
			}
			var r = velocity * time;
			var angle = rotate * Math.PI / 180;
			var loc = {
				x: loc.x + r * Math.cos(angle),
				y: loc.y - r * Math.sin(angle)
			};
			return loc;
		}
		function drawYears() {
			updateYears();
			for (var i=0, l=years.length; i < l; i++) {
				context.save();
				context.globalAlpha = years[i].o;
				context.beginPath();
				context.rect(years[i].x, years[i].y, years[i].w, years[i].h);
				context.clip();
				drawBg();
				context.drawImage(resources.get(years[i].img), years[i].x, years[i].y, years[i].w, years[i].h);
				context.restore();
			}
		}
		function updateYears() {
			if (step < 0.1) {
				years[0].o = step * 10;
			} else if (step > 0.22 && step < 0.32) {
				years[1].o = (step - 0.22) * 10;
			} else if (step > 0.476 && step < 0.576) {
				years[2].o = (step - 0.476) * 10;
			} else if (step > 0.73 && step < 0.83) {
				years[3].o = (step - 0.73) * 10;
			} else if (step > 0.9 && step < 1) {
				years[4].o = (step - 0.9) * 10;
			}
		}
		function drawDots() {
			updateDots();
			for (var i=0, l=dots.length; i < l; i++) {
				context.save();
				context.globalAlpha = dots[i].o;
				context.fillStyle = "#c51845";
				context.beginPath();
				// context.beginPath();
				// context.arc(dots[i].x, dots[i].y, 8, 0, Math.PI*2);
				// context.clip();
				// drawBg();
				context.arc(dots[i].x, dots[i].y, 8, 0, Math.PI*2);
				context.stroke();
				context.fill();
				// context.drawImage(resources.get(years[i].img), years[i].x, years[i].y, years[i].w, years[i].h);
				context.restore();
			}
		}
		function updateDots() {
			if (step < 0.1) {
				dots[0].o = step * 10;
			} else if (step > 0.9 && step < 1) {
				dots[1].o = (step - 0.9) * 10;
			}
		}
		function animationStop() {
			setTimeout(function(){
				cancelAnimationFrame(animation);
			}, 5);
		}

		animation = requestAnimationFrame(animate);
		setTimeout(function() {
			// document.querySelector('#page_index').addEventListener('touchstart', touchStartHandler);
			// document.querySelector('#page_index').addEventListener('touchend', touchEndHandler);
			animationFuncs['page_index'] = undefined;
			// $('#arrow_right').removeClass('hide');
		}, animationTime);
	},
	page_child: function() {
		// $('#arrow_right').addClass('hide');
		$('#bg_word_child').addClass('animate');
		setTimeout(function() {
			$('#word_child_1').addClass('animate');
			setTimeout(function() {
				$('#word_child_2').addClass('animate');
				setTimeout(function() {
					$('#word_child_3').addClass('animate');
					setTimeout(function() {
						$('.calender').addClass('animate');
						setTimeout(function() {
							$('#calender_2014').removeClass('animate');
							// document.querySelector('#page_child').addEventListener('touchstart', touchStartHandler);
							// document.querySelector('#page_child').addEventListener('touchend', touchEndHandler);
							// $('#arrow_right').removeClass('hide');
						}, 1500);
					}, durationWord);
				}, durationWord);
			}, durationWord);
		}, durationWord);
	},
	page_adult: function() {
		// $('#arrow_right').addClass('hide');
		$('#bg_word_adult').addClass('animate');
		setTimeout(function() {
			$('#word_adult_1').addClass('animate');
			setTimeout(function() {
				$('#word_adult_2').addClass('animate');
				// document.querySelector('#page_adult').addEventListener('touchstart', touchStartHandler);
				// document.querySelector('#page_adult').addEventListener('touchend', touchEndHandler);
				// $('#arrow_right').removeClass('hide');
			}, durationWord);
		}, durationWord);
	},
	page_oldman: function() {
		// $('#arrow_right').addClass('hide');
		$('#bg_word_oldman').addClass('animate');
		setTimeout(function() {
			$('#word_oldman').addClass('animate');
			setTimeout(function() {
				$('#photo1').addClass('animate');
					setTimeout(function() {
						$('#photo2').addClass('animate');
						setTimeout(function() {
							$('#photo3').addClass('animate');
							setTimeout(function() {
								$('#photo4').addClass('animate');
								setTimeout(function() {
									$('#photo5').addClass('animate');
									setTimeout(function() {
										$('#photo6').addClass('animate');
										setTimeout(function() {
											$('#photo7').addClass('animate');
											// document.querySelector('#page_oldman').addEventListener('touchstart', touchStartHandler);
											// document.querySelector('#page_oldman').addEventListener('touchend', touchEndHandler);
											// $('#arrow_right').removeClass('hide');
										},durationImg);
									},durationImg);
								},durationImg);
							},durationImg);
						},durationImg);
					},durationImg);
			},durationImg);
		}, durationImg);
	},
	page_share: function() {
		$('#arrow_right').addClass('hide');
		$('#share_letter').animate({
			'marginTop': $('#share_top').outerHeight(),
			'paddingBottom': $('#share_bottom').outerHeight()
		}, durationWord, 'swing');
	}
}

resources.load([
    'static/img/bg_index.jpg',
    'static/img/bg_child.jpg',
    'static/img/bg_adult.jpg',
    'static/img/bg_oldman.jpg',
    'static/img/bg_share.jpg',
    'static/img/year_1995.png',
    'static/img/year_2000.png',
    'static/img/year_2005.png',
    'static/img/year_2010.png',
    'static/img/year_2015.png',
    'static/img/share_bottom.png'
]);

resources.onReady(init);

function init() {
	var pageIndex = document.querySelector('#page_index');
	// pageIndex.addEventListener('touchstart', musicPlay);
	pageIndex.addEventListener('touchstart', touchStartHandler);
	pageIndex.addEventListener('touchend', touchEndHandler);
	$(pageIndex).removeClass('hide');
	$('#arrow_right').removeClass('hide');
	animationFuncs['page_index']();
}

function isDragging(e) {		// 是否一根手指拖拽
	return e.changedTouches !== undefined && e.changedTouches.length === 1 && e.touches.length === 1;
	// var changed = e.changedTouches.length,
	// 	touching = e.touches.length;

	// return changed === 1 && touching === 1;
}

function touchStartHandler(e) {		// touchstart处理函数
	e.preventDefault();
	if (isDragging(e)) {
		yStart = e.changedTouches[0].clientY;
		xStart = e.changedTouches[0].clientX;
	} else {
		yStart = e.clientY;
		xStart = e.clientX;
		mousedown = true;
	}
}

function touchEndHandler(e) {			// touchend处理函数
	e.preventDefault();
	if (mousedown) {
	} else if (e.touches.length === 0 && e.changedTouches.length === 1) {
		e = e.changedTouches[0];
	} else {
		return false;
	}
	var yLength = e.clientY - yStart;
	var xLength = e.clientX - xStart;
	var target = ($(e.target).hasClass('page') ? e.target : e.target.parentNode);
	if (xLength > 0) {
		// slideDown(target);
		slideRight(target);
	} else if (xLength < 0) {
		// slideUp(target);
		slideLeft(target);
	}
}

function slideDown(dom) {
	var $self = $(dom),
		$prev = $self.prev('.page');
	if ($prev.length <= 0) {
		return false;
	};
	$self.addClass('slidedown');
	$prev.removeClass('hide').addClass('flipdown');
	dom.removeEventListener('touchstart', touchStartHandler);
	dom.removeEventListener('touchend', touchEndHandler);
	setTimeout(function() {
		var prevDom = document.querySelector('#' + $prev.attr('id'));
		prevDom.addEventListener('touchstart', touchStartHandler);
		prevDom.addEventListener('touchend', touchEndHandler);
		$self.addClass('hide').removeClass('slidedown');
		$prev.removeClass('flipdown');
		var func = animationFuncs[$prev.attr('id')];
		if (func) {
			func();
			animationFuncs[$prev.attr('id')] = undefined;
		};
	}, durationPage);
}

function slideUp(dom) {
	var $self = $(dom),
		$next = $self.next('.page');
	if ($next.length <= 0) {
		return false;
	};
	var nextDomId = $next.attr('id');
	$self.addClass('slideup');
	$next.removeClass('hide').addClass('flipup');
	dom.removeEventListener('touchstart', touchStartHandler);
	dom.removeEventListener('touchend', touchEndHandler);
	setTimeout(function() {
		var nextDom = document.querySelector('#' + nextDomId);
		if (nextDomId != 'page_share') {
			nextDom.addEventListener('touchstart', touchStartHandler);
			nextDom.addEventListener('touchend', touchEndHandler);
		};
		$self.addClass('hide').removeClass('slideup');
		$next.removeClass('flipup');
		var func = animationFuncs[nextDomId];
		if (func) {
			func();
			animationFuncs[nextDomId] = undefined;
		};
	}, durationPage);
}

function slideRight(dom) {
	var $self = $(dom),
		$prev = $self.prev('.page');
	if ($prev.length <= 0) {
		return false;
	};
	$self.addClass('slideright');
	$prev.removeClass('hide').addClass('flipright');
	dom.removeEventListener('touchstart', touchStartHandler);
	dom.removeEventListener('touchend', touchEndHandler);
	setTimeout(function() {
		var prevDom = document.querySelector('#' + $prev.attr('id'));
		$self.addClass('hide').removeClass('slideright');
		$prev.removeClass('flipright');
		var func = animationFuncs[$prev.attr('id')];
		if (func) {
			func();
			animationFuncs[$prev.attr('id')] = undefined;
		} else {
			// prevDom.addEventListener('touchstart', touchStartHandler);
			// prevDom.addEventListener('touchend', touchEndHandler);
		}
		prevDom.addEventListener('touchstart', touchStartHandler);
		prevDom.addEventListener('touchend', touchEndHandler);
	}, durationPage);
}

function slideLeft(dom) {
	var $self = $(dom),
		$next = $self.next('.page');
	if ($next.length <= 0) {
		return false;
	};
	var nextDomId = $next.attr('id');
	$self.addClass('slideleft');
	$next.removeClass('hide').addClass('flipleft');
	dom.removeEventListener('touchstart', touchStartHandler);
	dom.removeEventListener('touchend', touchEndHandler);
	setTimeout(function() {
		var nextDom = document.querySelector('#' + nextDomId);
		$self.addClass('hide').removeClass('slideleft');
		$next.removeClass('flipleft');
		var func = animationFuncs[nextDomId];
		if (func) {
			func();
			animationFuncs[nextDomId] = undefined;
		} else {
			if (nextDomId != 'page_share') {
				// nextDom.addEventListener('touchstart', touchStartHandler);
				// nextDom.addEventListener('touchend', touchEndHandler);
			};
		}
		nextDom.addEventListener('touchstart', touchStartHandler);
		nextDom.addEventListener('touchend', touchEndHandler);
	}, durationPage);
}

function musicControl() {
	var audio = document.getElementById('bg_music');
	if (audio.paused) {
		$('#music_control').removeClass('pause').addClass('play');
		audio.play();
	} else {
		$('#music_control').removeClass('play').addClass('pause');
		audio.pause();
	}
}
document.querySelector('#music_control').addEventListener('touchstart', musicControl);

function musicPlay() {
	document.getElementById('bg_music').play();
}